<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css">
    <title>管理员界面</title>
    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script>
        $.get("http://localhost:8080/music");
        for(x=1;x<=data.lastPage;x++){
            $("#l1").after("<li>x</li>")
            $.get("http://localhost:8080/music?page=x&size=8");
        }
        for(i in data.list){
            $("tbody").append("<tr>" +"<td>data.list[i].id</td>>"+"<td>data.list[i].musicname</td>"+"<td>data.list[i].singer</td>"+"<td class='t4'><button type='button' class='btn btn-sm btn-danger'>delete</button>" +
                "<button type='button' class='btn btn-sm btn-warning' style='float:right'>alter</button></td>"+
                "</tr>");
        }
    </script>
    <script>
        $("#b1").click(function(){
            $.post("http://localhost:8080/music",{id:1},function(data){
                if(data.status==200){
                    //删除成功
                    if(confirm("恭喜你删除成功！点击确认刷新页面")){
                        //删除成功直接从新发送请求，加载页面
                        $(location).attr("href","http://localhost:63342/study/db/static/html/admin.html");
                    }
                }
            },"json");
      });
    </script>
    <style>

        th.t4{
            width:140px;
        }
        h2 {
            font-size:100px;
            color:grey;
            text-align: center;
            font-family:"Times New Roman",Times,serif;
        }
        div#d1{
            background-image:url('bg/bg2.jpg');
            background-repeat:repeat-x;
            height:150px;
        }
        div#d2{
            background-color: #E8E8E8;
            height:60px;
            border-top-style:solid;
            border-bottom-style:solid;
            border-width:2px;
            border-color: #C0C0C0;
            padding-top: 10px;
            padding-left: 5px;
        }
        div#d4{
            text-align: center;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="d1">
        <h2>welcome</h2>
    </div>
    <div id="d2">
        <form class="form-inline" role="form">
            <label>key words:</label>
            <div class="form-group">
                <label class="sr-only" for="name">名称</label>
                <input type="text" class="form-control" id="name"
                       placeholder="song's name">
            </div>

            <button type="button" class="btn"><i style="font-size:15px" class="fa">&#xf002</i>search</button>
            <a href="http://localhost:63342/study/db/static/html/upload.html" target="_blank">
            <button type="button" class="btn btn-warning">
                Upload <i style="font-size:15px" class="fa">&#xf0ee</i>
            </button>
            </a>
        </form>
    </div>
    <table class="table table-striped table-hover table-condensed">
        <thead>
        <tr class="text-center">
            <th><i style="font-size:15px" class="fa">&#xf024</i>序号</th>
            <th><i style="font-size:15px" class="fa">&#xf025</i>歌名</th>
            <th><i style="font-size:15px" class="fa">&#xf007</i>歌手</th>
            <th class="t4"><i style="font-size:15px" class="fa">&#xf013</i>操作</th>
        </tr>
        </thead>
        <tbody>

        <tr>
            <td>1</td>
            <td>Anna</td>
            <td>Anna</td>
            <td class="t4">
                <button type="button" class="btn btn-sm btn-danger">delete</button>
                <button id='b1' type="button" class="btn btn-sm btn-warning" style="float:right">alter</button>
            </td>

        </tr>

        </tbody>
    </table>
    <div id="d4">
        <ul class="pagination">

            <li id="l1"><a href="#">&laquo;</a></li>
            <!--<li class="active"><a href="#">1</a></li>-->
            <!--<li><a href="#">2</a></li>-->
            <!--<li><a href="#">3</a></li>-->
            <!--<li><a href="#">4</a></li>-->
            <!--<li><a href="#">5</a></li>-->
            <li><a href="#">&raquo;</a></li>
        </ul>
    </div>
</div>

</body>
</html>